<template>
  <div class="flex1">
    <div class="operation-item gui-paddingn flex justify-between">
      <div>
        <button @click="handleOpenAdd" class="gda-btn gda-btn-primary">
          <i class="iconfont icon-tianjia- mr5"></i>添加用户
        </button>
        <nuxt-link to="/admin/usercode" class="gda-btn gda-btn-primary pointer ml10">
          <i class="iconfont icon-describe mr5"></i>兑换码管理
        </nuxt-link>
      </div>
      <div>
        <input type="text" placeholder="用户昵称、用户账号、用户手机" @blur="handleSearch" v-model.trim="queryParams.keyword"
               class="binput mr10"/>
        <input type="text" placeholder="用户UUID" @blur="handleSearch" v-model.trim="queryParams.uuid"
               class="binput mr10"/>
        <select v-model.number="queryParams.forbidden" @change="handleSearch" class="binput mr10">
          <option :value="-1">--是否禁止--</option>
          <option :value="1">已禁止</option>
          <option :value="0">未禁止</option>
        </select>
        <select v-model.number="queryParams.vipFlag" @change="handleSearch" class="binput mr10">
          <option :value="-1">--vip身份--</option>
          <option :value="1">普通用户</option>
          <option :value="2">月会员</option>
          <option :value="3">季度会员</option>
          <option :value="4">年会员</option>
          <option :value="7">超级会员</option>
        </select>
        <select v-model.number="queryParams.teacherFlag" @change="handleSearch" class="binput mr10">
          <option :value="-1">--是否老师--</option>
          <option :value="1">老师</option>
          <option :value="0">普通用户</option>
        </select>
        <select v-model.number="queryParams.authorFlag" @change="handleSearch" class="binput mr10">
          <option :value="-1">--是否作者--</option>
          <option :value="1">作者</option>
          <option :value="0">普通用户</option>
        </select>
        <select v-model="queryParams.role" @change="handleSearch" class="binput">
          <option value="">--是否管理员--</option>
          <option value="admin">管理员</option>
          <option value="normal">普通用户</option>
        </select>
      </div>
    </div>
    <div class="gui-padding">
      <div>
        <table class="k-data-table-table w100" style="table-layout: auto;">
          <thead class="n-data-table-thead">
          <tr class="n-data-table-tr">
            <th colspan="1" rowspan="1" data-col-key="id" class="n-data-table-th">
              <div class="n-data-table-th__title-wrapper">
                <div class="n-data-table-th__title">编号</div>
              </div>
            </th>
            <th colspan="1" rowspan="1" data-col-key="id" class="n-data-table-th">
              <div class="n-data-table-th__title-wrapper">
                <div class="n-data-table-th__title">相关信息</div>
              </div>
            </th>
            <th>
              <div class="n-data-table-th__title-wrapper">
                <div class="n-data-table-th__title">VIP类型</div>
              </div>
            </th>
            <th>
              <div class="n-data-table-th__title-wrapper">
                <div class="n-data-table-th__title">是否禁止</div>
              </div>
            </th>
            <th>
              <div class="n-data-table-th__title-wrapper">
                <div class="n-data-table-th__title">是否老师</div>
              </div>
            </th>
            <th>
              <div class="n-data-table-th__title-wrapper">
                <div class="n-data-table-th__title">是否作者</div>
              </div>
            </th>
            <th>
              <div class="n-data-table-th__title-wrapper">
                <div class="n-data-table-th__title">角色信息</div>
              </div>
            </th>
            <th>
              <div class="n-data-table-th__title-wrapper">
                <div class="n-data-table-th__title">修改密码</div>
              </div>
            </th>
            <th>
              <div class="n-data-table-th__title-wrapper">
                <div class="n-data-table-th__title">操作</div>
              </div>
            </th>
          </tr>
          </thead>
          <tbody class="n-data-table-tbody">
          <template v-for="(item,index) in dataList" :key="index">
            <tr class="n-data-table-tr">
              <td>{{ item.id }}</td>
              <td>
                <div>昵称：{{ item.nickname }} <span class="ml5">性别：{{ item.male == 1 ? "男" : item.male == 0?"女":"保密" }}</span></div>
                <div>账号：{{ item.account }} <span class="ml5">城市：{{ item.province || "暂无" }} / {{ item.city || "暂无" }}</span></div>
                <div>编号：{{ item.uuid }}</div>
                <div>注册：{{  formatTimeToStr(item.createTime)  }}</div>
              </td>
              <td>
                <div>类型：
                  <select class="binput" v-model.number="item.vipFlag"
                          @change="handleSendvipAdminUser(item)">
                    <option :value="0">--请选择--</option>
                    <option :value="1">普通用户</option>
                    <option :value="2">月会员</option>
                    <option :value="3">季度会员</option>
                    <option :value="4">年会员</option>
                    <option :value="7">超级会员</option>
                  </select>
                </div>
                <div>到期时间：{{formatTimeToStr( item.vipTime) }}</div>
              </td>
              <td>
                <select class="binput" v-model.number="item.forbidden"
                        @change="handleUpdateStatus(item,'forbidden','forbidden')">
                  <option :value="1">已禁止</option>
                  <option :value="0">正常</option>
                </select>
              </td>
              <td>
                <select v-model.number="item.teacherFlag"
                        @change="handleUpdateStatus(item,'teacher_flag','teacherFlag')">
                  <option :value="1">老师</option>
                  <option :value="0">普通用户</option>
                </select>
              </td>
              <td>
                <select class="binput" v-model.number="item.authorFlag" @change="handleUpdateStatus(item,'author_flag','authorFlag')">
                  <option :value="1">作者</option>
                  <option :value="0">普通用户</option>
                </select>
              </td>
              <td>
                <select class="binput" v-model="item.role" @change="handleUpdateStatus(item,'role','role')">
                  <option :value="'admin'">管理员</option>
                  <option :value="'normal'">普通用户</option>
                </select>
              </td>
              <td>
                <div> <input type="text" class="binput" placeholder="请输入修改密码" maxlength="16" v-model="item.npassword" />
                 <button @click="handleUpdatePwd(item)" class="ml10">修改</button></div>
                <div class="mt5"> <input type="text" class="binput" placeholder="请输入手机号码" maxlength="16" v-model="item.telephone" />
                 <button @click="handleUpdateTel(item)" class="ml10">修改</button></div>
              </td>
              <td>
                <div class="ml5">
                  <n-popconfirm
                      positive-text="确定"
                      negative-text="取消"
                      @positive-click="handleDelTemplate(item,index)"
                  >
                    <template #trigger>
                      <span class="comment-action-del pointer red"><i class="iconfont icon-shanchu2 mr2"></i>删除</span>
                    </template>
                    你确定删除吗？
                  </n-popconfirm>
                </div>
              </td>
            </tr>
          </template>
          <tr>
            <td colspan="20">
              <k-empty :show="total == 0"></k-empty>
              <div @click="handleLoadMore" v-if="total > queryParams.pageSize && queryParams.pageNo < pages"
                   class="flex justify-center pointer">加载更多({{ total || 0 }})
              </div>
              <div v-if="total > queryParams.pageSize && queryParams.pageNo == pages"
                   class="flex justify-center c999 mt20 mb20">没有更多了
              </div>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
    <ksd-user-reg-add ref="regAddRef"></ksd-user-reg-add>
  </div>
</template>
<script setup>
const total = ref(0)
const pages = ref(0)
const regAddRef = ref({})
const loadingFlag = ref(false)
const dataList = ref([])
const queryParams = reactive({
  keyword: "",
  pageNo: 1,
  pageSize: 20,
  vipFlag: -1,
  uuid: "",
  role: "",
  forbidden: -1,
  authorFlag: -1,
  teacherFlag: -1,
})

const handleOpenAdd =  () => {
  regAddRef.value.handleOpen()
}

const handleSearch = async () => {
  queryParams.pageNo = 1
  dataList.value = []
  handleLoadData()
}

const handleUpdateStatus = async (item, field, field2) => {
  await useUpdateAdminUserApi({
    id: item.id,
    field: field,
    value: item[field2]
  })
  useMessage().success("操作成功!!!")
}

const handleUpdatePwd = async (item) => {
  await useUpdatePwdAdminUserApi({
    userId: item.id,
    password: item.npassword
  })
  useMessage().success("操作成功!!!")
}

const handleUpdateTel = async (item) => {
  try {
    await useUpdateTelAdminUserApi({
      userId: item.id,
      telephone: item.telephone
    })
    useMessage().success("操作成功!!!")
  }catch (e) {
    useMessage().error(e.message)
  }
}


const handleSendvipAdminUser = async (item) => {
  await useSendvipAdminUserApi({
    userId: item.id,
    vipFlag: item.vipFlag,
  })
  useMessage().success("操作成功!!!")
}

const handleLoadData = async () => {
  loadingFlag.value = true
  const resp = await useLoadAdminUserListApi(queryParams)
  const newarr = resp.data.records.map(c=>{
    c.npassword = ""
    return c
  })
  dataList.value = dataList.value.concat(newarr)
  total.value = resp.data.total
  pages.value = resp.data.pages
  loadingFlag.value = false
}

const handleLoadMore = () => {
  queryParams.pageNo++
  handleLoadData()
}

const handleDelTemplate = async (item,index) => {
  await useLoginDialog()
  await useDelAdminUserApi(item.id)
  dataList.value.splice(index,1)
  total.value--
}


definePageMeta({
  middleware: ["md-admin"],
  layout: "nindex",
})

onMounted(async () => {
  handleLoadData()
})

</script>
<style scoped lang="scss">
._land_23vdq_1 {
  display: flex;
  justify-content: center;
  width: 100%;
}


._land-container_23vdq_7 {
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 80px 8%;
  max-width: 1280px;
  padding: 40px 40px 30px
}

._land-img_23vdq_14 {
  grid-column: span 7;
  max-width: 100%;
  object-fit: contain
}


._land-text_23vdq_11 {
  display: flex;
  flex-direction: column;
  grid-column: span 5;
  align-items: flex-start;
  justify-content: center
}

._land-text_23vdq_11 > section {
  font-weight: bold;
  font-size: 28px;
  color: var(--text-color-primary, var(--text-color-primary, #222529))
}

._land-text_23vdq_11 > ul {
  padding: 0;
  margin: 0;
  margin-top: 28px;
  margin-bottom: 48px;
  margin-left: 20px;
  line-height: 200%;
  list-style: disc;
  color: #666;
  font-size: 16px;
}

.gda-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
}

.gdesign-icon {
  width: 1em;
  height: 1em;
  overflow: hidden;
  font-size: 20px;
}

.gda-btn > i, .gda-btn > span {
  display: inline-flex;
  pointer-events: none;
  line-height: 1;
}

.k-data-table-table th {
  background: #fafafc;
}

.k-data-table-table td,
.k-data-table-table th {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(239, 239, 245, 1);
}
</style>